<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/echarts.js"></script>
    <script src="/js/jquery.js"></script>
</head>
<body>
<button onclick="getData()"
        style="float:right;width: 80px;height: 40px;background-color: cornflowerblue;">请求数据</button>
<div id="main"  style="height: 500px;width: 600px;"></div>

<script>
    var mEcharts = echarts.init(document.getElementById("main"))
    // 4.指定图表的配置项和数据
    var option = {
        title: {
            text: 'Basic Radar Chart'
        },
        legend: {
            data: ['张三', '李四']
        },
        radar: {
            shape: 'circle',
            indicator: [
                { name: '语文', max: 150 },
                { name: '数学', max: 150 },
                { name: '英语', max: 150 },
                { name: '物理', max: 110 },
                { name: '化学', max: 100 },
                { name: '生物', max: 90 }

            ]
        },
        series: [
            {
                name: '张三 vs 李四',
                type: 'radar',
                data: [
                    {
                        value: [130, 135, 100, 80, 70, 88],
                        name: '张三'

                    },
                    {
                        value: [110, 120, 120, 90, 34, 56],
                        name: '李四'


                    }
                ]
            }
        ]
    };
    mEcharts.setOption(option)

    function  getData(){
        var data = {"id":5}
        $.ajax({
            url: "http://127.0.0.1:8081/userScoreListById",
            type:"POST",
            contentType: "application/json",
            //dataType: "json",
            data: JSON.stringify(data),
            success: function (data) {
              var list = data.map(item=>({grade:item.grade}));
              console.log(list);
              mEcharts.setOption({
                  series:[{
                      name: '张三 vs 李四',
                      type: 'radar',
                      data: [
                          {
                              value: list,
                              name: '孙悟空'

                          },
                          {
                              value: [110, 120, 120, 90, 34, 56],
                              name: '李四'


                          }
                      ]


                  }

                  ]
              })
            }
        })

    }


</script>

<!--  <h1> Hi, Spring Boot</h1>-->

</body>
</html>